<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-switch v-model="s1"></pure-switch>
			</pj-demo>

			<!-- 内部文本 -->
			<pj-demo title="内部文本">
				<pure-switch
					v-model="s1"
					mode="inner"
					theme="primary"
				></pure-switch>
			</pj-demo>

			<!-- 外部文本 -->
			<pj-demo title="外部文本">
				<pure-switch
					v-model="s1"
					mode="outer"
					theme="success"
				></pure-switch>
			</pj-demo>

			<!-- 圆点文本 -->
			<pj-demo title="圆点文本">
				<pure-switch
					v-model="s1"
					mode="circle"
					theme="warning"
				></pure-switch>
			</pj-demo>

			<!-- 图标提示 -->
			<pj-demo title="图标提示">
				<pure-switch
					v-model="s1"
					mode="icon"
					theme="danger"
				></pure-switch>
			</pj-demo>

			<!-- 异步切换 -->
			<pj-demo title="异步切换">
				<pure-flex>
					<pure-switch
						v-model="s2"
						mode="circle"
						theme="primary"
						async
						:loading="loading"
						@onClick="handleClick"
					></pure-switch>
					<pure-switch
						v-model="s2"
						mode="icon"
						theme="primary"
						async
						:loading="loading"
						@onClick="handleClick"
					></pure-switch>
				</pure-flex>
			</pj-demo>

			<!-- 主题 -->
			<pj-demo title="主题">
				<pure-flex wrap>
					<pure-switch
						v-model="s2"
						theme="primary"
					></pure-switch>
					<pure-switch
						v-model="s2"
						theme="success"
					></pure-switch>
					<pure-switch
						v-model="s2"
						theme="warning"
					></pure-switch>
					<pure-switch
						v-model="s2"
						theme="danger"
					></pure-switch>
					<pure-switch
						v-model="s2"
						theme="info"
					></pure-switch>
				</pure-flex>
			</pj-demo>

			<!-- 幽灵样式 -->
			<pj-demo title="幽灵样式">
				<pure-flex wrap>
					<pure-switch
						v-model="s3"
						ghost
						theme="primary"
					></pure-switch>
					<pure-switch
						v-model="s3"
						ghost
						theme="success"
					></pure-switch>
					<pure-switch
						v-model="s3"
						ghost
						theme="warning"
					></pure-switch>
					<pure-switch
						v-model="s3"
						ghost
						theme="danger"
					></pure-switch>
					<pure-switch
						v-model="s3"
						ghost
						theme="info"
					></pure-switch>
				</pure-flex>
			</pj-demo>

			<!-- 禁用状态 -->
			<pj-demo title="禁用状态">
				<pure-flex wrap>
					<pure-switch
						v-model="s2"
						theme="primary"
						disabled
					></pure-switch>
					<pure-switch
						v-model="s2"
						theme="success"
						disabled
					></pure-switch>
					<pure-switch
						v-model="s2"
						theme="warning"
						disabled
					></pure-switch>
					<pure-switch
						v-model="s2"
						theme="danger"
						disabled
					></pure-switch>
					<pure-switch
						v-model="s2"
						theme="info"
						disabled
					></pure-switch>
				</pure-flex>
			</pj-demo>

			<!-- 只读状态 -->
			<pj-demo title="只读状态">
				<pure-flex wrap>
					<pure-switch
						v-model="s2"
						theme="primary"
						readonly
					></pure-switch>
					<pure-switch
						v-model="s2"
						theme="success"
						readonly
					></pure-switch>
					<pure-switch
						v-model="s2"
						theme="warning"
						readonly
					></pure-switch>
					<pure-switch
						v-model="s2"
						theme="danger"
						readonly
					></pure-switch>
					<pure-switch
						v-model="s2"
						theme="info"
						readonly
					></pure-switch>
				</pure-flex>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref, computed } from "vue";
	import { onLoad, onReady, onShow } from "@dcloudio/uni-app";

	const s1 = ref(true);
	const s2 = ref(true);
	const s3 = ref(true);
	const loading = ref(false);

	// 异步切换
	function handleClick() {
		loading.value = true;
		let timer = setTimeout(() => {
			s2.value = !s2.value;
			clearTimeout(timer);
			loading.value = false;
		}, 2500);
	}
</script>

<style lang="scss" scoped>
	.page {
	}
</style>
